<template>
	<Content :title="title">
		<view class="header-box">
			<MyNavList :data="headerData" v-model="warnType" @change="warnTypeChange"></MyNavList>
			<MyNavList :data="headerData1" v-model="messageStatus" @change="noticeChange"></MyNavList>
		</view>
		<view class="main-box">
			<template v-if="data && data.length === 0">
				<Empty></Empty>
			</template>
			<List ref="orderList" v-else :type="type" :scrollNoData="scrollNoData" :data="data" :pageStatus="pageStatus"
				@ok="ok" @onRefresh="onRefresh" @scrollBottom="scrollBottom"></List>
		</view>
		</view>
	</Content>
</template>

<script>
	import MySelect from "@/components/mySelect";
	import MyNavList from "@/components/myNavList";
	import Content from "@/components/content/index.vue";
	import Empty from "@/components/empty";
	import List from "./list";
	import fetch from "@/utils/fetch";
	import {
		getUserInfo
	} from "@/store/user";
	export default {
		props: {
			title: String,
			type: {
				//1 块点击  2里面的内容行点击
				type: String,
				default: "1",
			},
			pageStatus: String, //页面标识
		},
		components: {
			MySelect,
			Empty,
			Content,
			List,
			MyNavList,
		},
		computed: {
			headerData() {
				return [{
						label: "预警",
						value: this.warningInfo[this.templateType],
						src: '/dms/messageWarning/queryPadMessageList',
						noReadUrl: '/dms/messageWarning/queryEarlyTotalRead',
						markReadUrl: '/dms/messageWarning/updateMessageRead',
					},
					{
						label: "消息",
						value: this.noticeInfo[this.templateType],
						// value: this.noticeInfo[this.templateType] || 0,
						src: '/dms/messageWarning/queryMessageInformationList',
						noReadUrl: '/dms/messageWarning/queryEarlyInformationTotalRead',
						markReadUrl: '/dms/messageWarning/updateMessageInformationRead',
					},
				]
			},
			headerData1() {
				return [{
						label: "全部",
						value: null,
					},
					{
						label: "未读",
						value: this.noReadNum,
					},
				]
			},
		},
		data() {
			return {
				messageStatus: null,
				warnType: 0,
				src: '/dms/messageWarning/queryPadMessageList',
				noReadUrl: '/dms/messageWarning/queryEarlyTotalRead',
				markReadUrl: '/dms/messageWarning/updateMessageRead',
				search: {
					pageNum: 1,
					pageSize: 10,
				},
				data: [],
				scroll: false,
				scrollNoData: false,
				navIndex: 0,
				warningInfo: [],
				noticeInfo: [],
				templateType: 0,
				noReadNum: 0, //未读数量
				templateName: '预警',
			};
		},
		mounted() {
			this.getList(true);
			this.getEarlyWarningTotal();
			this.getEarlyNoticeTotal();
			this.getTotalRead();
		},
		methods: {
			getList(arg) {
				const that = this;
				that.$loading.open();
				if (arg) {
					that.search.pageNum = 1;
					that.scroll = false;
					that.scrollNoData = false;
					that.data = [];
				}
				this.setSearchParams()
				return fetch("get", this.src, {
					...that.search,
					templateType: this.templateType,
					messageStatus: this.messageStatus,
				}).then(({
					data
				}) => {
					const workList = data?.records.map(item => {
						return {
							...item,
							showMore: false,
						}
					}) || []
					if (that.scroll) {
						if ((workList || []).length === 0) {
							that.scrollNoData = true;
						} else {
							that.data.push(...workList);
						}
					} else {
						that.data = workList || [];
					}
					that.$loading.close();
				});
			},
			setSearchParams() {
				if (this.title.includes('生产')) {
					this.templateType = 1;
				} else if (this.title.includes('设备')) {
					this.templateType = 2;
				} else if (this.title.includes('模具')) {
					this.templateType = 3;
				}
			},
			getEarlyWarningTotal() {
				fetch('get', '/dms/messageWarning/queryEarlyWarningTotal').then((res) => {
					const data = res.data;
					this.$set(this, 'warningInfo', ["", data.workOrderWarning || 0, data.deviceWarning || 0, data
						.moldWarning || 0
					]);
				});
			},
			getEarlyNoticeTotal() {
				fetch('get', '/dms/messageWarning/queryEarlyWarningInformationTotal').then((res) => {
					const data = res.data;
					this.$set(this, 'noticeInfo', ["", data.workOrderWarning || 0, data.deviceWarning || 0, data
						.moldWarning || 0
					]);

				});
			},
			warnTypeChange(val) {
				console.log(val)
				this.src = val.src;
				this.noReadUrl = val.noReadUrl;
				this.markReadUrl = val.markReadUrl;
				this.onRefresh()
				
			},
			noticeChange() {
				this.data=[];
				this.getList()
			},
			open() {
				this.show = true;
			},
			close() {
				this.show = false;
			},
			onRefresh() {
				this.$loading.open();
				this.getList(true);
				this.getTotalRead();
			},
			// itemClick(data) {
			// 	this.$emit("itemClick", data);
			// },
			scrollBottom(next) {
				const that = this;
				if (!that.scrollNoData) {
					that.search.pageNum = that.search.pageNum + 1;
					that.scroll = true;

					that.getList().then(() => {
						next(that.scrollNoData);
					});
					return;
				}
				next();
			},
			getTotalRead() {
				fetch('get', this.noReadUrl, {
					
					templateType: this.templateType,
				}).then((res) => {
					this.noReadNum = res.data;
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	.all-view {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.header-box {
		padding: 5px 20px;
		background-color: #ffffff;
	}

	.input-box {
		display: flex;
		align-items: center;
		overflow: auto;

		.my-select-box {
			flex: 1;
			background-color: #f3f5f6;
			margin-right: 20rpx;
			display: flex;
			border: 1px solid #e0e0e0;
			border-radius: 5px;

			/deep/ .my-select {
				width: 104px;
			}
		}

		/deep/ .u-input {
			border: none;
			background-color: transparent;
		}

		.icon {}
	}

	.nav-list-box {
		margin-bottom: 20rpx;
	}

	.main-box {
		padding: 20rpx;
		flex: 1;
		overflow: auto;
	}

	.action-box {
		width: 100%;
		padding: 10px 20px;
		margin-bottom: 10px;
		background-color: #ffffff;
	}
</style>